import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';

const StatusBarMeta: IPublicTypeComponentMetadata = {
  componentName: 'StatusBar',
  title: '状态栏',
  category: '基础组件',
  group: '首页',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: 'hzdz-charts',
    version: '0.1.0',
    exportName: 'StatusBar',
    main: 'src/index.tsx',
    destructuring: true,
    subName: ''
  },
  props: [
    {
      name: 'ref',
      propType: 'object',
    },
    {
      name: 'key',
      propType: 'string',
    },
    {
      name: 'style',
      propType: 'object',
    },
  ],
  configure: {
    props: [
      // 基础属性
      {
        name: 'basic',
        type: 'group',
        display: 'accordion',
        title: {
          label: '基础属性',
        },
        items: [
          {
            name: 'chineseText',
            title: {
              label: '中文文字',
              tip: '左侧显示的中文文字'
            },
            setter: 'StringSetter',
          },
          {
            name: 'englishText',
            title: {
              label: '英文文字',
              tip: '中间显示的英文文字'
            },
            setter: 'StringSetter',
          },

          {
            name: 'theme',
            title: {
              label: '主题',
            },
            setter: {
              componentName: 'SelectSetter',
              props: {
                options: [
                  { label: '深色', value: 'dark' },
                  { label: '浅色', value: 'light' }
                ]
              }
            },
          },
          {
            name: 'componentId',
            title: {
              label: '组件ID',
              tip: '设置组件的唯一标识符'
            },
            setter: 'StringSetter',
          }
        ]
      },
      // 样式属性
      {
        name: 'style',
        type: 'group',
        display: 'accordion',
        title: {
          label: '样式属性',
        },
        items: [
          {
            name: 'style',
            title: {
              label: '自定义样式',
            },
            setter: 'StyleSetter',
          },
          {
            name: 'className',
            title: {
              label: '自定义类名',
            },
            setter: 'StringSetter',
          }
        ]
      }
    ],
    supports: {
      style: true,
      className: true,
      events: ['onClick']
    }
  }
};

const snippets: IPublicTypeSnippet[] = [
  {
    title: '*状态栏',
    screenshot: '',
    schema: {
      componentName: 'StatusBar',
      props: {
        chineseText: '运营现状',
        englishText: 'OPERATION STATUS',
        theme: 'dark'
      }
    }
  }
];

export default {
  ...StatusBarMeta,
  snippets,
};
